<template>
  <el-popover :width="width" v-model="visible">
    <div class="image-picker-bg">
      <el-input size="small" placeholder="请输入其他图标" clearable v-model="iconName">
        <el-button slot="append" icon="el-icon-info" @click="onInfoClick"></el-button>
      </el-input>
      <el-scrollbar class="scroll-wrap">
        <ul class="icon-list">
          <li v-for="(item, index) in iconList"
              :key="index"
              @click="onClick(item)" :class="{active: item === currValue}">
            <span>
              <my-icon :class="item"></my-icon>
              <p class="icon-name">{{ item }}</p>
            </span>
          </li>
        </ul>
      </el-scrollbar>

      <select-footer
        :clear="showClearBtn"
        :submit="showOkBtn"
        @on-clear="clearSelected"
        @on-submit="handleSelected">
        <slot name="footer"></slot>
      </select-footer>
    </div>
    <div slot="reference" class="image-picker">
      <slot name="reference">
        <my-avatar v-if="value" class="image-picker__value" :icon="value" shape="square" :size="size"></my-avatar>
        <my-avatar v-else class="image-picker__empty" icon="el-icon-close" shape="square" :size="size"></my-avatar>
      </slot>
    </div>
  </el-popover>
</template>

<script>
// import iconfont from '$ui/assets/icons/iconfont.json'
import icons from './el-icon.json'
import selectFooter from '../select-footer'

export default {
  name: 'image-picker',
  components: {
    selectFooter
  },
  props: {
    width: {
      type: Number,
      default: 500
    },
    value: {
      type: String
    },
    size: {
      type: String,
      default: 'default',
      validator: function (val) {
        return ['large', 'small', 'default'].includes(val)
      }
    },
    showClearBtn: {
      type: Boolean,
      default: true
    },
    showOkBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const iconList = icons.map(o => 'el-icon-' + o) // iconfont.glyphs.map(o => o.font_class)
    return {
      iconList,
      currValue: this.value,
      visible: false,
      iconName: ''
    }
  },
  methods: {
    onClick(item) {
      this.currValue = item
      this.iconName = ''
    },
    clearSelected() {
      this.currValue = ''
      this.iconName = ''
      this.$emit('input', '')
      this.visible = false
    },
    handleSelected() {
      let rtn = this.currValue
      if(this.iconName) {
        rtn = this.iconName
        this.currValue = ''
      }
      this.$emit('input', rtn)
      this.visible = false
    },
    onInfoClick() {
      window.open('https://newgateway.gitee.io/my/ui/icon/')
    }
  },
  watch: {
    visible(val) {
    },
    value(val) {
      console.info('val:', val)
      if(val.indexOf('el-icon') === 0) {
        this.iconName = ''
        this.currValue = val
      } else {
        this.iconName = val
        this.currValue = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.image-picker {
  display: inline-block;

  &__value {
    cursor: pointer;
    background: #1890ff;
  }

  &__empty {
    cursor: pointer;
    color: #F00;
    background: #FFF;
    border: 1px solid #ccc;
  }

}

.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  height: 100%;

  li {
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;

    &:after {
      display: inline-block;
      vertical-align: middle;
      content: "";
      height: 100%;
    }

    .my-icon {
      display: block;
      font-size: 32px;
      margin-bottom: 15px;
      color: #99a9bf;
      transition: color .15s linear;
    }

    span {
      line-height: normal;
      transition: color .15s linear;
      display: inline-block;
      vertical-align: middle;
    }


    &:hover, &.active {
      background: #208de6;
      color: #FFF;

      .my-icon {
        color: #FFF;
      }
    }
  }
}

</style>
<style lang="scss">
.scroll-wrap {
  max-height: 400px;
  overflow-y: auto !important;
}

</style>
